<template>
  <div class="container">
    <el-row>
      <el-col :span="16">
        <div>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in slidesshow" :key="item.index">
            <img :src="item.picUrl">
          </el-carousel-item>
        </el-carousel>
        </div>
        <div class="article">
          <timeline>
            <timeline-item class="timeLine" bg-color="#9dd8e0" style="text-align: left">
              <h3><a href="http://www.baidu.com">你还是大护法荷兰首都拉各斯的垃圾白沙封杀国会大厦</a></h3>
              <p>
                hksdahfldhsalgh在我日常折腾博客时想添加一个时间线或者说归档页面，在 npm 上搜了一下没有特别趁手的组件，当然 ivew 和 element-ui 完全满足需求，然而我只想要一个轻量的单独的组件。
                好了，我的机会来了 XD
              </p>
              <div class="info">
                <i class="fa fa-calendar"> 2018-12-27</i>
                <span class="marked">浏览：{{article.Visitors}}</span>
                <span class="marked">赞赏：{{article.favours}}</span>
                <span class="marked">作者：{{article.author}}</span>
                <span class="marked">类别：{{article.category}}</span>
              </div>
            </timeline-item>
            <timeline-item bg-color="#9dd8e0" style="text-align: left">
              <h3>你还是大护法荷兰首都拉各斯的垃圾白沙封杀国会大厦</h3>
              <p>
              hksdahfldhsalgh
              </p>
              <div class="info">
                <i class="fa fa-calendar">2018-12-27</i>
                <span class="marked">浏览：{{article.Visitors}}</span>
                <span class="marked">赞赏：{{article.favour}}</span>
                <span class="marked">作者：{{article.author}}</span>
                <span class="marked">类别：{{article.category}}</span>
              </div>
            </timeline-item>
            <timeline-item class="timeLine" bg-color="#9dd8e0" style="text-align: left">
              <h3><a href="http://www.baidu.com">你还是大护法荷兰首都拉各斯的垃圾白沙封杀国会大厦</a></h3>
              <p>
                hksdahfldhsalgh在我日常折腾博客时想添加一个时间线或者说归档页面，在 npm 上搜了一下没有特别趁手的组件，当然 ivew 和 element-ui 完全满足需求，然而我只想要一个轻量的单独的组件。
                好了，我的机会来了 XD
              </p>
              <div class="info">
                <i class="fa fa-calendar"> 2018-12-27</i>
                <span class="marked">浏览：{{article.Visitors}}</span>
                <span class="marked">赞赏：{{article.favours}}</span>
                <span class="marked">作者：{{article.author}}</span>
                <span class="marked">类别：{{article.category}}</span>
              </div>
            </timeline-item>
            <timeline-item bg-color="#9dd8e0" style="text-align: left">
              <h3>你还是大护法荷兰首都拉各斯的垃圾白沙封杀国会大厦</h3>
              <p>
              hksdahfldhsalgh
              </p>
              <div class="info">
                <i class="fa fa-calendar">2018-12-27</i>
                <span class="marked">浏览：{{article.Visitors}}</span>
                <span class="marked">赞赏：{{article.favour}}</span>
                <span class="marked">作者：{{article.author}}</span>
                <span class="marked">类别：{{article.category}}</span>
              </div>
            </timeline-item>
          </timeline>
        </div>
      </el-col>
      <el-col :span="8">
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
  import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
  export default {
    components: {
      Timeline,
      TimelineItem,
      TimelineTitle
    },
    data() {
        return {
          article: {
            author: 'zhouyj',
            category: '随笔',
            Visitors: 20,
            favours: 10
          },
          slidesshow:[
            {
              'index': 1,
              'picUrl': require('@/assets/slideshow/1.jpg'),
            },
            {
              'index': 2,
              'picUrl': require('@/assets/slideshow/2.jpg'),

            },
            {
              'index': 3,
              'picUrl': require('@/assets/slideshow/3.jpg'),
            }
          ]
        };
    }
  };
</script>
<style scoped lang="scss">
  .article {
    padding: 0px;
    margin: 0px;
    .info {
      font-size: 12px;
      position: absolute;
      left: 0px;
      bottom: 0px;
      .marked {
        margin-left: 10px;
      }
    }
  }
</style>
